<template>
	<view class="content">
		<view class="title-wrap">
			<view class="title">
<!--				<image class="logo" src="/static/logo202312.png" mode="widthFix"></image>-->
			</view>
			<view class="sub-title">全屋净饮水解决方案</view>
		</view>
		<view class="content-wrap">
			
			
			<view class="buttons buttons-big">
				<view class="button" v-for="(item, index) in vrList" :key="index" @click="openUrl(item)">
					<!-- <image class="button-logo" src="/static/logo.png"></image> -->
					<image class="button-logo" mode="widthFix" :src="item.src"></image>
					<view class="button-text">{{ item.label }}</view>
				</view>
			</view>
			<view class="buttons">
				<view class="button" v-for="(item, index) in buttons" :key="index" @click="goToPage(item)">
					<!-- <image class="button-logo" src="/static/logo.png"></image> -->
					<image class="button-logo" :src="item.src"></image>
					<view class="button-text">{{ item.label }}</view>
				</view>
			</view>
			<view class="buttons buttons-horizontal">
				<view class="button" @click="goToQualityPage">
					<image class="button-logo" src="/static/chartmap.png"></image>
					<view class="button-text">水质查询</view>
				</view>
				<view class="button" @click="goToSoftPage">
					<image class="button-logo" src="/static/ruanshui.png"></image>
					<view class="button-text">软水查询</view>
				</view>
			</view>
			<!-- <view class="buttons buttons-horizontal">
				
			</view> -->
			<!-- URL：https://beian.miit.gov.cn/#/Integrated/index -->
							<!-- <view class="" @click="goToSoftPage">
								<view class="">浙ICP备09105217号-8X ></view>
							</view> -->
			<view class="beian" @click="goTonBeiAn">ICP备案号:浙ICP备09105217号-8X ></view>
		</view>
	</view>
</template>

<script>
	import request from '/common/request.js';

	const vrListImgs = [
		'/static/wenxin.png',
		'/static/bieshu.png'
	]
	export default {
		onShareAppMessage() {
					return {
						title: "沁园全屋",
						imageUrl: "",
						// path: ""
					}
				},
		data() {
			return {
				title: 'Hello',
				buttons: [
					{ code: 1, label: "厨下", src: '/static/chuxia.png' },
					{ code: 2, label: "净饮", src: '/static/jingyin.png' },
					{ code: 3, label: "全屋", src: '/static/quanwu.png' },
					{ code: 5, label: "户型", src: '/static/huxing.png' },
				],
				vrList: [
					{
						label: "温馨小屋",
						src: vrListImgs[0],
						links: "https://vr.qinyuan.cn/2/index.html"
					},
					{
						label: "豪华别墅",
						src: vrListImgs[1],
						links: "https://vr.qinyuan.cn/1/index.html"
					},
					
				]
			}
		},
		onLoad() {
			this.getVrList()
		},
		methods: {
			getVrList() {
				request({
					url: '/index/xy_vr',
				}).then(res => {
					console.log(res)
					if (res) {
						this.vrList = res.map((e, index) => {
							return {
								label: e.name,
								src: vrListImgs[index] || e.icon,
								...e
							}
						})
					}
				})
			},
			openUrl(item) {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + item.links
				})
			},
			goToPage(item) {
				uni.navigateTo({
					url: `/pages/tabbar/tabbar?label=${item.label}&code=${item.code}`
				})
			},
			goToQualityPage() {
				uni.navigateTo({
					url: `/pages/quality-query/quality-query`
				})
			},
			goToSoftPage() {
				uni.navigateTo({
					url: `/pages/softwater/softwater`
				})
			},
			goTonBeiAn() {
				let externalUrl = 'beian.miit.gov.cn/#/Integrated/index';
				      uni.navigateTo({
				        url: `/pages/webview/webview?url=${encodeURIComponent(externalUrl)}`
				      });
			}
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
	}
	.beian{
		color: #FFFF;
		font-size: xx-small;
	}
	.content {
		position: relative;
		// background: url("/static/home-bg.png");
		background: url("https://fh4.qinyuan.cn/uploads/bg/566df7d041a43c8eb65e597af6c32eff.png");
		background-size: cover;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		// padding-top:20%;
	}
	
	.space-wrap {
		width: 100%;
		height: 400rpx;
	}
	.title-wrap {
		position: absolute;
		width: 100%;
		margin-top: 20vh;
		// margin-top: 26%;
		// top: 200rpx;
		top: 0;
		left: 0;
		right: 0;
		text-align: center;
		.title {
			font-size: 26px;
			font-weight: bold;
			color: #8f8f94;
			letter-spacing: 1px;
			// padding-top: 150rpx;
			padding-bottom: 40rpx;
			text-align: center;
			.logo {
				width: 100vw;
				// margin-left: 60rpx;
				max-width: 45vw;
			}
		}
		.sub-title {
			font-size: 35px;
			letter-spacing: 1px;
			font-weight: bold;
			// padding-bottom: 320rpx;
			color: #fff;
		}
	}
	
	.content-wrap {
		position: absolute;
		bottom: 50rpx;
		left: 0;
		right: 0;
		// margin-bottom: 20%;
		width: 100%;
		text-align: center;
	}
	
	.buttons {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 40rpx;

		.button {
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			// background-color: #547996;
			// background-color: #547996;
			background-color: rgba(84, 121, 150, 0.8);
			color: #fff;
			padding: 30rpx 40rpx;
			border-radius: 10px;
			.button-logo {
				width: 70rpx;
				height: 70rpx;
			}
			.button-text {
				font-size: 15px;
				padding-top: 14rpx;
			}
		}
	}
	.buttons-big {
		width: 45%;
		margin: 0 auto;
		justify-content: center;
		.button {
			flex: 1;
			flex-direction: row;
			margin-right: 20rpx;

			&:last-child {
				margin-right: 0;
			}

			.button-logo {
				width: 140rpx;
				// height: 140rpx;
			}
			.button-text {
				padding-left: 40rpx;
			}
		}
	}

	.buttons-horizontal {
		.button {
			flex: 1;
			margin-right: 20rpx;
			padding: 12rpx 0;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.button-logo {
				width: 30rpx;
				height: 30rpx;
			}
			.button-text {
				padding: 0;
				padding-left: 20rpx;
				font-size: 14px;
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}

</style>
